<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
        >

<ui:component>

<style type="text/css">
    .barsearch {
        height: 14px;
        width: 100px;
        padding: 2px 3px;
        font-size: 11px;
        font-weight: bold;
    }

    .barsearchbutton {
        border-width: 1px;

    }

    /*.logoHome {*/
    /*height: 34px;*/
    /*width: 200px;*/
    /*float: left;*/
    /*background-color: green;*/

    /*}*/

    .commandHome {
    /*height: 34px;*/
        width: 100%; /*float: right;*/

    }

    .a1 A:link {
        text-decoration: none;
        color: white;
    }

    .a1 A:visited {
        text-decoration: none
    }

    .a1 A:active {
        text-decoration: none;
        color: yellow;
    }

    .a1 A:hover {
        text-decoration: underline;
        font-style: italic;
        color: #ff9999;
    }

    .myClass {
        padding: 1px 3px;

    }

    .fullHeight {
    /*padding: 1px 1px;*/
        height: 30px;

    }


</style>


<!--<h:panelGroup styleClass="logoHome" layout="block">-->
<!--<h:outputLabel styleClass="logoHomeStyle" value="BeConnected"/>-->
<!--</h:panelGroup>-->

<h:form>
<h:panelGroup id="homeToolBarCommand" styleClass="commandHome , a1" layout="block">

<rich:toolBar itemSeparator="none">
<rich:toolBarGroup styleClass="myClass">
    <h:graphicImage onclick="executeHome();" value="./style/images/homeLogo.png"
                    style="cursor:pointer; background:transparent;"/>
    <!--<h:outputLabel onclick="executeHome();" style="cursor:pointer; font-size:20px; margin:5px; color:white" value="BeConnected   "/>-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:outputLabel value="#{resources.homeLabel}" style="cursor:pointer" onclick="executeHome();">
                    <a4j:jsFunction name="executeHome" action="#{home.home}"/>
                </h:outputLabel>
            </h:panelGroup>

        </f:facet>

    </rich:dropDownMenu>
    <!--<a4j:commandLink value="Home" action="#{home.home}"/>-->
    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px; cursor:crosshair">
                <h:outputLabel value="#{resources.profileLabel}" style="cursor:pointer" onclick="operationProfile();">
                    <a4j:jsFunction name="operationProfile" action="#{home.profile}"/>
                </h:outputLabel>

            </h:panelGroup>

        </f:facet>
        <rich:menuItem value="#{resources.informationLabel}" action="#{home.profile}">
            <f:setPropertyActionListener value="profileTabTwo" target="#{home.profileTab}"/>
        </rich:menuItem>
        <rich:menuItem value="#{resources.photosLabel}" action="#{home.profile}">
            <f:setPropertyActionListener value="profileTabThree"
                                         target="#{home.profileTab}"/>
        </rich:menuItem>
    </rich:dropDownMenu>
    <!--<a4j:commandLink value="Profile" action="#{home.profile}"/>-->

    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <rich:dropDownMenu styleClass="fullHeight">
        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:outputLabel value="#{resources.friendsLabel}" style="cursor:pointer" onclick="operationFriends();">
                    <a4j:jsFunction name="operationFriends" action="#{home.friend}"/>
                </h:outputLabel>
            </h:panelGroup>

        </f:facet>
        <rich:menuItem value="#{resources.recentlyAddedLabel}" action="#{home.friend}">
            <f:setPropertyActionListener value="recentlyAdded" target="#{friendSessionBean.menuOptionView}"/>
        </rich:menuItem>

        <rich:menuItem value="#{resources.allFriendsLabel}" action="#{home.friend}">
            <f:setPropertyActionListener value="friends" target="#{friendSessionBean.menuOptionView}"/>
        </rich:menuItem>
    </rich:dropDownMenu>
    <!--</rich:toolBarGroup>-->

    <!--<rich:toolBarGroup styleClass="myClass">-->
    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationMailbox();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationMailbox" action="#{home.inbox}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.mailboxLabel} (#{mailSessionBean.unreadCount})"/>
        </h:panelGroup>
    </a4j:outputPanel>
    <!--<a4j:commandLink value="Inbox" "/>-->
    <!--</rich:toolBarGroup>-->

    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationContacts();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationContacts" action="#{home.contacts}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.contactsLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>


    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationChat();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationChat" action="#{home.chat}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.chatLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>

    <a4j:outputPanel rendered="#{home.manager}"
                     styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
                     layout="block"
                     onclick="operationManage();"
                     onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
                     onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationManage" action="#{home.manage}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.manageLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>
</rich:toolBarGroup>

<rich:toolBarGroup location="right" styleClass="myClass">

    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationAccount();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationAccount"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{accountSessionBean.account.firstName} #{accountSessionBean.account.lastName}"/>
        </h:panelGroup>
    </a4j:outputPanel>


    <rich:dropDownMenu styleClass="fullHeight">

        <f:facet name="label">
            <h:panelGroup layout="block" style="margin-top:6.5px">
                <h:panelGrid cellpadding="0" cellspacing="0" columns="2"
                             style="vertical-align:middle">
                    <h:outputText value="#{resources.settingsMeni}"/>
                </h:panelGrid>
            </h:panelGroup>

        </f:facet>

        <rich:menuItem value="#{resources.accountLabel}" action="#{home.account}">

        </rich:menuItem>

        <rich:menuGroup value="#{resources.languageMenuItem}">
            <rich:menuItem value="#{resources.englishMenuItem}">
                <a4j:actionparam name="language" value="en" assignTo="#{languageBean.language}"/>
            </rich:menuItem>
            <rich:menuItem value="#{resources.serbianMenuItem}">
                <a4j:actionparam name="language" value="sr" assignTo="#{languageBean.language}"/>
            </rich:menuItem>
        </rich:menuGroup>
        <rich:menuGroup value="#{resources.themeMenuGroup}">
            <rich:menuItem value="BlueSky">
                <a4j:actionparam name="skin" value="blueSky" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="BlueSky Modified">
                <a4j:actionparam name="skin" value="blueSky Modified" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Laguna">
                <a4j:actionparam name="skin" value="laguna" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Class-X">
                <a4j:actionparam name="skin" value="class-X" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Dark-X">
                <a4j:actionparam name="skin" value="dark-X" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Classic">
                <a4j:actionparam name="skin" value="classic" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="JapanCherry">
                <a4j:actionparam name="skin" value="japanCherry" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Ruby">
                <a4j:actionparam name="skin" value="ruby" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Wine">
                <a4j:actionparam name="skin" value="wine" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="DeepMarine">
                <a4j:actionparam name="skin" value="deepMarine" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="EmereldTown">
                <a4j:actionparam name="skin" value="emeraldTown" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Sakura">
                <a4j:actionparam name="skin" value="sakura" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
            <rich:menuItem value="Default">
                <a4j:actionparam name="skin" value="default" assignTo="#{skinBean.skin}"/>
            </rich:menuItem>
        </rich:menuGroup>


    </rich:dropDownMenu>
    <a4j:outputPanel
            styleClass="dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect"
            layout="block"
            onclick="operationLogout();"
            onmouseover="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-select rich-ddmenu-label-select');"
            onmouseout="this.setAttribute('class', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');this.setAttribute('className', 'dr-menu-label rich-ddmenu-label fullHeight dr-menu-label-unselect rich-ddmenu-label-unselect');"
            >
        <a4j:jsFunction name="operationLogout" action="#{loginBean.logout}"/>
        <h:panelGroup layout="block" style="margin-top:6.5px" styleClass="dr-label-text-decor rich-label-text-decor">
            <h:outputText value="#{resources.logoutLabel}"/>
        </h:panelGroup>
    </a4j:outputPanel>

    <!--<a4j:commandLink value="Logout" action="#{home.logout}"/>-->
    <!--<h:inputText styleClass="barsearch" value="#{searchSessionBean.simpleSearchKey}"/>-->
    <h:inputText styleClass="barsearch" value="#{home.searchKey}"/>
    <h:commandButton styleClass="barsearchbutton"
                     action="#{home.search}"
                     value="#{resources.findLabel}"
            />
    <a4j:commandLink value="ddd" action="#{home.test}" />
    <!--reRender="homeToolBarCommand"-->
    <!--action="#{searchBean.search}"-->
</rich:toolBarGroup>
</rich:toolBar>


</h:panelGroup>

</h:form>


</ui:component>


</html>
